<template>
  <div>
    <div class="mt-32px mb-20px w-1102px">
      <div class="w-full flex flex-row justify-between items-center">
        <h2 class="h-28px text-28px font-bold text-#160C35">热门游戏</h2>
        <button
          class="h-32px px-20px box-border flex flex-row items-center bg-#E0E6F1 rounded-16px hover:shadow"
        >
          <img src="@/assets/game.png" alt="skills" class="w-20px h-16px" />
          <div class="ml-6px text-16px font-500 text-#242633">全部技能</div>
        </button>
      </div>
      <div class="mt-18px w-1102px h-288px overflow-hidden transition-all">
        <div class="w-[fit-content] h-full flex flex-row" ref="gameContainer" :style="transformX">
          <div
            class="group mr-18px w-206px h-288px relative z-0 last:mr-0 cursor-pointer"
            v-for="(item, index) in list"
            :key="index"
            @click="gotoUserDetail(item.id)"
          >
            <div
              class="absolute inset-x-0 bottom-0 w-full h-248px bg-white rounded-16px z-1 group-hover:bg-#7733ff transition"
            ></div>
            <div
              class="absolute top-0 inset-x-12px w-182px h-230px rounded-12px overflow-hidden z-2"
            >
              <div class="ant-image" style="width: 182px; height: 230px">
                <img
                  alt=""
                  class="ant-image-img w-182px h-230px object-cover transform group-hover:scale-110 transition"
                  :src="item.image_cover"
                  style="height: 230px"
                />
              </div>
            </div>
            <div
              class="absolute top-246px inset-x-0 w-full text-16px leading-20px font-500 text-#242633 text-center z-2 group-hover:text-white group-hover:font-bold transition"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <HotGameSlider v-model="sliderValue" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import HotGameSlider from './hot-game-slider.vue'
const router = useRouter()
const gotoUserDetail = (id) => {
  router.push({ name: 'Skill', params: { id } })
}
defineProps(['list'])
const sliderValue = ref(0)
const gameContainer = ref(null)
const transformX = computed(() => {
  const gameContainerWidth = gameContainer.value?.clientWidth
  return `transform: translateX(-${sliderValue.value * (gameContainerWidth - 1102)}px);`
})
// watchEffect(() => {
//   console.log(transformX.value)
// })
</script>

<style>
a {
  transform: translateX();
}
</style>
